@import '~@hi-ui/core-css/lib/index.scss';

$mock-input-prefix: '#{$component-prefix}-mock-input' !default;

.#{$mock-input-prefix} {
  @include input-reset();

  $input-shadow: 0 0 0 2px use-color-mode('primary', 100);
  $input-error-shadow: 0 0 0 2px use-color-mode('danger', 100);

  // basic
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  flex: 1;
  transition-property: all;
  transition-duration: use-motion-duration('normal');
  transition-timing-function: use-motion-bezier('normal');
  width: 100%;
  height: auto;
  z-index: auto;
  font-size: inherit;
  line-height: inherit;
  color: use-color('gray', 700);
  border: use-border-size('normal') use-color-static('transparent');
  background-color: use-color-static('white');

  &:not(.disabled):hover {
    z-index: calc(#{use-zindex('absolute')} + 1);
  }

  &:not(.disabled).focused {
    z-index: calc(#{use-zindex('absolute')} + 1);
  }

  &.disabled {
    cursor: not-allowed;
  }

  &__suffix,
  &__placeholder {
    color: use-color('gray', 400);

    .#{$mock-input-prefix}--appearance-unset & {
      color: use-color('gray', 500);
    }
  }

  &__placeholder,
  &__value {
    flex: 1;
  }

  &__placeholder {
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  // clear icon
  &__clear {
    display: inline-flex;
    align-items: center;
    width: 16px;
    height: 16px;
    font-size: use-text-size('normal');
    text-align: center;
    color: use-color('gray', 500);
    flex-shrink: 0;
    cursor: pointer;
    visibility: hidden;
    opacity: 0;
    transition-property: all;
    transition-duration: use-motion-duration('normal');
    transition-timing-function: use-motion-bezier('normal');

    &:hover {
      color: use-color-static('black');
    }

    &.active {
      visibility: visible;
      opacity: 1;
    }
  }

  &__prefix,
  &__suffix,
  &__secondary-suffix {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: use-color('gray', 400);
    font-size: use-text-size('lg');
    text-align: center;
  }

  &__prefix {
    margin-right: use-spacing(4);
  }

  &__suffix {
    padding-left: use-spacing(4);
  }

  &__value {
    box-sizing: border-box;
    display: inline-block;
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  // 减去左或右边框 1px
  $input-padding-width: calc(#{use-spacing(6)} - 1px);

  &--size {
    &-sm {
      &.#{$mock-input-prefix} {
        height: use-height-size(6);
        font-size: use-text-size('sm');
        line-height: use-text-lineheight('sm');
        border-radius: use-border-radius('normal');
        padding: 1px $input-padding-width;
      }
    }

    &-md {
      &.#{$mock-input-prefix} {
        height: use-height-size(8);
        font-size: use-text-size('normal');
        line-height: use-text-lineheight('normal');
        border-radius: use-border-radius('normal');
        padding: 4px $input-padding-width;
      }
    }

    &-lg {
      &.#{$mock-input-prefix} {
        height: use-height-size(10);
        font-size: use-text-size('lg');
        line-height: use-text-lineheight('lg');
        border-radius: use-border-radius('normal');
        padding: 7px $input-padding-width;
      }
    }
  }

  &--appearance {
    &-line {
      &.#{$mock-input-prefix} {
        border-color: use-color('gray', 300);

        &:not(.disabled):hover {
          border-color: use-color-mode('primary');
        }

        &:not(.disabled).focused {
          box-shadow: $input-shadow;
          border-color: use-color-mode('primary');
        }

        &:not(.disabled).invalid {
          border-color: use-color-mode('error');

          &.hover {
            border-color: use-color-mode('error');
          }

          &.focused {
            box-shadow: $input-error-shadow;
          }
        }
      }
    }

    &-unset {
      &.#{$mock-input-prefix} {
        width: auto;
        max-width: 100%;
        justify-content: flex-start;
        border-color: transparent;

        &:not(.disabled):hover {
          background-color: use-color('gray', 100);
        }

        &:not(.disabled).focused {
          box-shadow: $input-shadow;
          background-color: use-color-static('white');
          border-color: use-color-mode('primary');
        }

        &:not(.disabled).invalid {
          border-color: use-color-mode('error');

          &.hover {
            border-color: use-color-mode('error');
          }

          &.focused {
            box-shadow: $input-error-shadow;
          }
        }
      }
    }

    &-filled {
      &.#{$mock-input-prefix} {
        background-color: use-color('gray', 100);

        &:not(.disabled):hover {
          background-color: use-color-static('white');
          border-color: use-color-mode('primary');
        }

        &:not(.disabled).focused {
          box-shadow: $input-shadow;
          border-color: use-color-mode('primary');
          background-color: use-color-static('white');
        }

        &:not(.disabled).invalid {
          border-color: use-color-mode('error');

          &.hover {
            border-color: use-color-mode('error');
          }

          &.focused {
            box-shadow: $input-error-shadow;
          }
        }
      }
    }

    &-line,
    &-unset,
    &-filled {
      &.disabled {
        &.#{$mock-input-prefix} {
          color: use-color('gray', 400);
        }
      }
    }

    &-line,
    &-filled {
      &.disabled {
        &.#{$mock-input-prefix} {
          background-color: use-color('gray', 100);
        }
      }
    }
  }
}
